<template>
  <div class="link-article-transfer">
    <div class="select-search">
      <a-select
        show-search
        :value="selectValue"
        :placeholder="selectPlaceholder"
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        :not-found-content="null"
        allow-clear
        size="small"
        style="width: 100%"
        @search="select"
        @focus="select('')"
        @change="changeSelect"
      >
        <a-select-option v-for="item in selectList" :value="item.id" :key="item.id">
          {{ item.labelName }}
        </a-select-option>
      </a-select>
    </div>
    <a-transfer
      class="list-transfer"
      :title="['', '']"
      show-search
      :data-source="dataSource"
      :filterOption="() => true"
      :target-keys="targetKeys"
      :render="item => item.articleName"
      :list-style="{
        width: '300px',
        height: '328px',
      }"
      @change="handleChange"
      @search="search"
      @scroll="scroll"
    />
  </div>
</template>
<script>
import { defineComponent, toRefs, toRaw, ref, watch } from 'vue';
export default defineComponent({
  name: '',
  props: {
    selectList: {
      default: () => [],
      type: Array,
    },
    selectValue: {
      default: undefined,
    },
    inputValue: {
      default: '',
      type: String,
    },
    dataSource: {
      default: () => [],
      type: Array,
    },
    value: {
      default: () => [],
      type: Array,
    },
    selectPlaceholder: {
      default: '请选择',
      type: String,
    },
  },
  setup(props, { emit }) {
    const { value } = toRefs(props);
    const targetKeys = ref(toRaw(value.value));

    // const filterOption = (inputValue, option) => {
    //   return option.description.indexOf(inputValue) > -1;
    // };
    watch(value, key => {
      targetKeys.value = key;
    });

    const handleChange = keys => {
      targetKeys.value = keys;
      emit('update:value', keys);
    };

    const search = (dir, value) => {
      emit('update:inputValue', value);
      emit('input-search', value);
    };

    const select = val => {
      emit('select', val);
    };

    const changeSelect = val => {
      emit('select-search', val);
      emit('update:selectValue', val);
    };

    const scroll = (...args) => {
      emit('scroll', args);
    };

    return {
      // filterOption,
      handleChange,
      targetKeys,
      search,
      select,
      changeSelect,
      scroll,
    };
  },
  emits: {
    select: null,
    'input-search': null,
    'update:value': null,
    'update:selectValue': null,
    'select-search': null,
    'update:inputValue': null,
    scroll: null,
  },
});
</script>

<style lang="less">
.list-transfer {
  .ant-transfer-list-body-search-wrapper {
    left: 128px;
    width: 60%;
    .ant-input {
      height: 24px;
    }
    .ant-transfer-list-search-action {
      top: 8px;
    }
  }
  .ant-transfer-list:last-child {
    .ant-transfer-list-body {
      padding: 0;
    }
    .ant-transfer-list-body-search-wrapper {
      display: none;
    }
  }
}
.link-article-transfer {
  position: relative;
  .select-search {
    position: absolute;
    top: 53px;
    left: 3px;
    z-index: 9;
    width: 133px;
  }
}
</style>
